<template>
	<view class="classify">
		<!-- 左侧切换 -->
		<scroll-view scroll-y="true" class="con">
				<van-sidebar>
				  <van-sidebar-item  
				  v-for="item in menuData"
				  :title="item.name" 
				  :key="item.id"
				  @click="showmenu(item.id)"
				  />
				</van-sidebar>
		</scroll-view>
		<!-- 右侧 -->
		<view class="rightBox">
			<menubox :menuBoxData="menuBoxData"></menubox>
		</view>
	</view>
</template>

<script>
	import menubox from "@/components/menubox.vue"
	export default{
		data(){
			return{
			  menuData:[],
			  menuBoxData:[]
			}
		},
		created(){
			this.getmenuData();
		},
		methods:{
			getmenuData(){
				this.$request({
					url:"/api/xiaomi/menu"
				}).then(res=>{
					//console.log(res);
					this.menuData=res.data;
					this.showmenu(res.data[0].id);//左侧列表出现后，立刻获取右侧数据
				}).catch(err=>{
					console.log(err);
				})
			},
			showmenu(aid){
				this.$request({
					url:"/api/xiaomi/menuDetail?id="+aid
				}).then(res=>{
					console.log(res);
					this.menuBoxData=res.data;
				}).catch(err=>{
					console.log(err);
				})
			}
		},
		components:{
			menubox
		}
	}
</script>

<style>
	.classify{
		display: flex;
	}
	.con{
		width:160rpx;
		height:100vh;
	}
	.rightBox{
		
	}
</style>
